<template>
	<view>
		<view>
			<table-title content="物品放行申请表详情"></table-title>
			<view class="record-id">单号：{{processNo}}</view>
			<view class="in-center">
				<small-title content="基本资料"></small-title>
				<view class="state-bar">
					<view class="state-msg">{{state}}</view>
				</view>
			</view>
			<view class="item-table">
				<view-item name="楼盘" :value="userMsg.userBuilding"></view-item>
				<view-item name="楼层" :value="userMsg.userFloor" :isLast="true"></view-item>
			</view>

			<small-title :isNeed="true" content="签名或公司盖章证明"></small-title>
			<image :class="signImg=='/static/uploadImg.png' ? 'pay-image' : 'pay-image-border'" :src="signImgThumb" mode="scaleToFill" @tap='chooseImage'></image>
			<button v-if="signImg == '/static/uploadImg.png'" class="add-button" @click="uploadSignFile">上传证明</button>
			<small-title :isNeed="true" content="物品列表"></small-title>
			<view style="margin-left: 20rpx;margin-right: 20rpx;">
				<uni-table :newMinWidth="(state==='待申请' || state==='已驳回')?200:0" border stripe emptyText="暂无更多数据" >
				    <!-- 表头行 -->
<!-- 				    <uni-tr>
						<uni-th style="width: 50rpx;" align="center">序号</uni-th>
				        <uni-th style="width: 50rpx;" align="center">物品名称</uni-th>
				        <uni-th style="width: 50rpx;" align="center">数量</uni-th>
				        <uni-th style="width: 50rpx;" align="center">单位</uni-th>
						<uni-th style="width: 50rpx;" v-if="state==='待申请' || state==='已驳回'" align="center">操作</uni-th>
				    </uni-tr> -->
					<uni-tr>
						<uni-th style="width: 100rpx;" align="center">序号</uni-th>
					    <uni-th style="width: 300rpx;" align="center">物品名称</uni-th>
					    <uni-th style="width: 150rpx;" align="center">数量</uni-th>
					    <uni-th style="width: 150rpx;" align="center">单位</uni-th>
						<uni-th v-if="state==='待申请' || state==='已驳回'" style="width: 150rpx;"></uni-th>
<!-- 						<uni-th v-if="!(state==='待申请' || state==='已驳回')" style="width: 0rpx;"></uni-th> -->
					</uni-tr>
				    <!-- 表格数据行 -->
				    <uni-tr v-for="(item,index) in goodList" :key="index">
				        <uni-td align="center">
							<!-- <view>{{index + 1}}</view> -->
							{{index + 1}}
						</uni-td>
				        <uni-td>
<!-- 							<view>
								<input style="width: 250rpx;" :disabled="state!=='待申请' && state!=='已驳回'" type="text" v-model="item.goodsName" placeholder="请输入物品名称" />
							</view> -->
							<input :disabled="state!=='待申请' && state!=='已驳回'" type="text" v-model="item.goodsName" placeholder="请输入物品名称" />
						</uni-td>
				        <uni-td>
<!-- 							<view>
								<input :disabled="state!=='待申请' && state!=='已驳回'" type="number" v-model="item.amount" placeholder="请输入" />
							</view> -->
							<input :disabled="state!=='待申请' && state!=='已驳回'" type="number" v-model="item.amount" placeholder="请输入" />
						</uni-td>
						<uni-td>
<!-- 							<view>
								<input :disabled="state!=='待申请' && state!=='已驳回'" type="text" v-model="item.unit" placeholder="请输入" />
							</view> -->
							<input :disabled="state!=='待申请' && state!=='已驳回'" type="text" v-model="item.unit" placeholder="请输入" />
						</uni-td>
						<uni-td v-if="state==='待申请' || state==='已驳回'">
							<view v-if="state==='待申请' || state==='已驳回'">
								<button style="width: 150rpx;margin-left: 0rpx;font-size: 28rpx;" @click="deleteGoods(index)">删除</button>
							</view>
						</uni-td>
				    </uni-tr>
				</uni-table>
			</view>
			<button v-if="state==='待申请' || state==='已驳回'" class="add-button" @click="addGoods()">添加物品+</button>
			<small-title content="处理进度"></small-title>
			<proccess-bar v-if="processFlag" :proccessList="proccessListDefult"></proccess-bar>
			<view v-if="state==='待确认'" class="mix-button">
				<view class="left-part">
					<button class="left-button" @click="modOrder">收到放行条，办结</button>
				</view>
				<view class="right-part">
					<button class="right-button" @click="back">返回</button>
				</view>
			</view>
			<view v-if="state==='待申请'" class="mix-button">
				<view class="left-part">
					<button class="left-button" @click="addOrder" >立即申请</button>
				</view>
				<view class="right-part">
					<button class="right-button" @click="back">返回</button>
				</view>
			</view>
			<view v-if="state==='已驳回'" class="mix-button">
				<view class="left-part">
					<button class="left-button" @click="reAddOrder" >重新申请</button>
				</view>
				<view class="right-part">
					<button class="right-button" @click="back">返回</button>
				</view>
			</view>
			<view style="height: 200rpx;"></view>
		</view>
	</view>
</template>		

<script>
	import {
		myUploadFile,
		ONLINE_SERVER_ADDRESS_BASE,
		syncGetOrder
	} from "../../../util/network.js"
	import {
		processHistoryList
	} from "../../../util/common.js"
	export default{
		data() {
			return {
				processFlag:false,
				recordId: -1,
				processNo:'待分配',
				state: '已受理',
				userMsg:{'userName':'','userPhone':'','userCompany':'','userBuilding':'',
					'userFloor':'','userRoom':''},
				signImg:'',
				signImgThumb:'',
				signFilePath:'',
				goodList:[{'goodsName':'','amount':'','unit':''}],
				proccessList:[
					{'type':'firstCanvas','commentMsg':'发起申请','time':'2021-01-01 01:01:11'},
					{'type':'middleCanvas','commentMsg':'受理','time':'2020-02-02 02:02:22'},
					{'type':'lastCanvas','commentMsg':'办结','time':'2020-03-03 03:33:33'}
				],
				proccessListDefult:[],
				token:'',
				previewUrl:ONLINE_SERVER_ADDRESS_BASE + '/file/preview/',
				previewUrlThumb:ONLINE_SERVER_ADDRESS_BASE + '/file/thumbnail-preview/',
			}
		},
		methods: {
			uploadSignFile(){
				if(this.signFilePath == ''){
					uni.showModal({
						content:'上传失败，请先选择证明图片',
						showCancel:false
					})
					return -1
				}
				let a = myUploadFile(this.token, this.signFilePath)
				 a.then((v)=>{
					 let _this = this
					 let _v = v
					 uni.request({
					 	url:`${ONLINE_SERVER_ADDRESS_BASE}/goods-release/mod-sign-file`,
					 	header: {
					 		'Authorization': this.token,
					 	},
					 	data: {
					 		fileId: v,
					 	},
					 	method:'POST',
					 	success: function (res) {
					 		console.log("提交成功",res.data);
					 		if(res.data.code == 200){
								_this.signImg = _this.previewUrl + _v
								_this.signImgThumb = _this.previewUrlThumb + _v
								let userInfo = uni.getStorageSync('userinfo')
								userInfo.selfSignFile = _v
								uni.setStorageSync('userinfo',userInfo)
					 			uni.showModal({
					 				content:'上传公司盖章成功',
					 				showCancel:false
					 			})
					 		}else{
								uni.showModal({
									content:'上传失败',
									showCancel:false
								})
							}
					 	}
					 })
				})
			},
			chooseImage(){
				if(this.state === '待申请' && this.signImg == "/static/uploadImg.png") {
					uni.chooseImage({
						count: 1,
						sourceType: ['album', 'camera'],
						// #ifdef MP-WEIXIN
						sizeType: ['compressed'],
						// #endif
						success: (res) => {
							this.signFilePath = res.tempFilePaths[0]
							this.signImgThumb = res.tempFilePaths[0]
						}
					})
				}else{
					uni.previewImage({
						current: 0,
						urls: [this.signImg]
					})
				}
			},
			/*
			功能：添加一行放行物品信息
			参数：无
			*/
			addGoods(){
				this.goodList.push({'goodsName':'','amount':'','unit':''})
			},
			
			/*
			功能：子组件事件触发修改物品放行列表
			参数：
			index：当前物品序号
			goodsName：物品名称
			amount：数量
			unit：单位
			*/
			changeGoods(index, goodsName, amount, unit){
				this.goodList[index].goodsName = goodsName;
				this.goodList[index].amount = amount.toString();
				this.goodList[index].unit = unit;
			},
			
			/*
			功能：子组件事件触发删除当前行物品
			参数：
			index：当前物品序号
			*/
			deleteGoods(index){
				if(this.goodList.length <= 1){
					let temp = {'goodsName':'','amount':'','unit':''}
					this.$set(this.goodList,index,temp)
					return
				}
				this.goodList.splice(index,1)
			},
			
			/*
			功能：工单详细页处理通用函数
			参数：
			option：操作类型（先定成 创建、写入、查询）
			*/
			addOrder(){
				if(this.checkPara() == -1){
					return -1
				}
				uni.request({
					url:`${ONLINE_SERVER_ADDRESS_BASE}/goods-release/add`,
					header: {
						'Authorization': this.token,
					},
					data: {
						goodsDetail: JSON.stringify(this.goodList),                        //待写入工单内容
						commentMsg: '发起申请'                       //操作信息
					},
					method:'POST',
					success: function (res) {
						console.log("提交成功",res.data);
						if(res.data.code == 200){
							uni.navigateBack()
						}
					}
				})
			},
			checkPara(){
				let flag = 0
				if(this.signImg == "/static/uploadImg.png"){
					uni.showModal({
						content:'请点击上传公司盖章图片',
						showCancel:false
					})
					flag = -1
					return flag
				}
				if(this.goodList.length == 0){
					uni.showModal({
						content:'请添加物品',
						showCancel:false
					})
					flag = -1
					return flag
				}
				for(var i = 0; i < this.goodList.length; i++){
					console.log(item)
					this.goodList[i].goodsName = this.goodList[i].goodsName.trim()
					this.goodList[i].unit = this.goodList[i].unit.trim()
					let item = this.goodList[i]
					if(item.goodsName == ""){
						uni.showModal({
							content:'物品名称不能为空',
							showCancel:false
						})
						flag = -1
						break
					}
					if(item.amount == "" || item.amount <= 0){
						uni.showModal({
							content:'请输入待放行物品数量',
							showCancel:false
						})
						flag = -1
						break
					}
					if(item.unit == ""){
						uni.showModal({
							content:'单位不能为空',
							showCancel:false
						})
						flag = -1
						break
					}
				}
				return flag
			},
			modOrder(){
				console.log("[info]","收到放行条办结：" + this.recordId)
				uni.request({
					url:`${ONLINE_SERVER_ADDRESS_BASE}/goods-release/finish/` + this.recordId,
					header: {
						'Authorization': this.token,
					},
					data: {
						commentMsg: '租户收到放行条，办结'                       //操作信息
					},
					method:'POST',
					success: function (res) {
						console.log("物品放行办结成功",res);
						if(res.data.code == 200){
							uni.navigateBack()
						}
					},
					fail: (res) => {
						console.log("物品放行办结调用失败")
					}
				})
			},
			
			getOrder(){
				let a = syncGetOrder("goods-release/show/" + this.recordId)
				 a.then((res)=>{
					 console.log("异步",res)
					 if(res.data.code == 200){
						 switch(parseInt(res.data.data.status)) {
						      case 0:
						         this.state = "待审核"
						         break;
						      case 1:
						         this.state = "待派送"
						         break;
						 	 case 2:
						         this.state = "待确认"
						 	    break;
						 	 case 3:
						         this.state = "已办结"
						 	    break;
						 	 case 4:
						         this.state = "已驳回"
						 	    break;
						      default:
						         this.state = "待申请"
						 } 
						 this.goodList = JSON.parse(res.data.data.goodsDetail)
						 this.processNo = res.data.data.processNo
						 this.proccessListDefult=processHistoryList(res.data.data.processDetail)
						 this.processFlag = true
					}
				})
			},
			
			reAddOrder(){
				if(this.checkPara() == -1){
					return -1
				}
				console.log("[info]","重新提交：" + this.recordId)
				uni.request({
					url:`${ONLINE_SERVER_ADDRESS_BASE}/goods-release/mod/` + this.recordId,
					header: {
						'Authorization': this.token,
					},
					data: {
						goodsDetail: JSON.stringify(this.goodList),                        //待写入工单内容
						commentMsg: '重新提交申请'                       //操作信息
					},
					method:'POST',
					success: function (res) {
						console.log("物品放行重新提交成功",res);
						if(res.data.code == 200){
							uni.navigateBack()
						}
					},
					fail: (res) => {
						console.log("物品放行重新提交调用失败")
					}
				})
			},
			
			back(){
				uni.navigateBack()
			},
		},
		onLoad(option) {
			//传入单号
			let userInfo = uni.getStorageSync('userinfo')
			if(userInfo != null){
				this.userMsg.userBuilding = userInfo.title
				this.userMsg.userFloor = userInfo.floor
				this.recordId = option.id
				this.token = uni.getStorageSync('token')
				this.state = option.state
				console.log(userInfo)
				if(userInfo.selfSignFile != null && userInfo.selfSignFile > 0){
					this.signImg = this.previewUrl + userInfo.selfSignFile
					this.signImgThumb = this.previewUrlThumb + userInfo.selfSignFile
				}else{
					this.signImg = "/static/uploadImg.png"
					this.signImgThumb = "/static/uploadImg.png"
				}
				
				// console.log(`${ONLINE_SERVER_ADDRESS_BASE}/goods-release/finish/` + this.recordId)
			}else{
				uni.navigateTo('../../login/login')
			}
		},
		mounted() {
			//如果是新建表单则不查询
			if(this.state != '待申请'){
				this.getOrder()
			}
		}
	}
</script>

<style>
	page{
		background-color: #F1F1F1
	}
	.record-id{
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 30rpx;
	}
	.state-bar{
		display: flex;
		align-items: center;
		color: #FFFFFF;
		background-color: #DD524D;
		width: 160rpx;
		justify-content: center;
		margin-left: auto;
		margin-right: 50rpx;
		font-size: 30rpx;
		border-radius: 50rpx;
		height: 50rpx;
	}
	.state-msg{
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.item-table{
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
	.mix-button{
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.left-part{
		float: right;
	}
	.right-part{
		float: left;
	}
	.left-button{
		background-color: #FF0000;
		border-radius: 50rpx 0 0 50rpx;
		color: #FFFFFF;
		width: 300rpx;
		font-size: 30rpx;
	}
	.right-button{
		background-color: #0000FF;
		border-radius: 0 50rpx 50rpx 0;
		color: #FFFFFF;
		width: 300rpx;
		font-size: 30rpx;
	}
	.in-center{
		display: flex;
		flex-direction: row;
		align-items: center;
	}
	.add-button {
		border-width: 0px;
		align-items: center;
		justify-content: center;
		margin: 30rpx 0 40rpx 250rpx;
		height: 50rpx;
		width: 250rpx;
		display: flex;
		color: #22B242;
	}
	.pay-image{
		align-items: center;
		margin: 20rpx 0 20rpx 50rpx;
		width: 130rpx;
		height: 130rpx;
	}
	.pay-image-border{
		border:2rpx solid;
		border-radius: 2px;
		margin: 20rpx 0 20rpx 50rpx;
		width: 126rpx;
		height: 126rpx;
	}
</style>
